<script lang="ts" setup>
import { ref, reactive } from 'vue'
const pic1 = "https://shq.qdjqy.cn/profile/0911/index/pic1.png"
const pic2 = "https://shq.qdjqy.cn/profile/0911/index/pic2.png"
const pic3 = "https://shq.qdjqy.cn/profile/0911/index/pic3.png"
const pic4 = "https://shq.qdjqy.cn/profile/0911/index/pic4.png"
const pic5 = "https://shq.qdjqy.cn/profile/0911/index/pic5.png"

definePage({
  style: {
    navigationStyle: 'custom'
  },
})

function handleClickLeft() {
  uni.navigateBack({
    delta: 1
  })
}

const tab = ref<number>(0)
const tabsWithBadge = ref([
  { title: '全部' },
  { title: '待出游' },
  { title: '已出游' },
  { title: '已取消' }
])

function handleChange(event: any) {
  tab.value = event.index;
}

interface Coupon {
  id: number,
  image: string,
  staus: string,
  name: string,
  time: string
}

// normal 待出游、 used 已出游 、 cancel 已取消
const reservedList = reactive<Coupon[]>([
  { id: 1, image: pic1, staus: 'normal', name: '机遇时空X-META全感VR乐园', time: '2026年8月5日'},
  { id: 2, image: pic2, staus: 'used', name: '青岛融创水世界（山东融创5选1）', time: '2026年8月5日'},
  { id: 3, image: pic3, staus: 'cancel', name: '山东文旅·红叶柿岩旅游区', time: '2026年8月5日'},
  { id: 4, image: pic4, staus: 'used', name: '济南融创乐园（山东融创5选1）', time: '2026年8月5日'},
  { id: 5, image: pic5, staus: 'normal', name: '琅琊古城', time: '2026年8月5日'},
])

const couponNormal = computed(() => {
  return (statu:string) => {
    return (statu === 'normal' && tab.value === 1) || (statu === 'normal' && tab.value === 0)
  }
})

const couponUsed = computed(() => {
  return (statu:string) => {
    return (statu === 'used' && tab.value === 2) || (statu === 'used' && tab.value === 0)
  }
})

const couponCancel = computed(() => {
  return (statu:string) => {
    return (statu === 'cancel' && tab.value === 3) || (statu === 'cancel' && tab.value === 0)
  }
})
</script>

<template>
  <view>
    <wd-navbar left-text="我的预约" left-arrow @click-left="handleClickLeft" 
      custom-style="background-color: transparent !important;" safeAreaInsetTop></wd-navbar>

    <wd-tabs v-model="tab" @change="handleChange">
      <wd-tab v-for="(item, index) in tabsWithBadge" :key="index" :title="`${item.title}`">
        <view class="coupon-content" v-for="(item, index) in reservedList" :key="index">
          <view class="li flex" v-if="couponNormal(item['staus'])">
            <image class="img" :src="pic1"></image>
            <view class="right">
              <view class="title">{{ item['name'] }}</view>
              <view class="content">预约时间：{{ item['time'] }}</view>
              <view class="bottom">
                <wd-button type="error" size="small" custom-class	="mr-15">待出游</wd-button>
                <wd-button type="text" size="small" custom-class	="mr-15 color-red">取消出游</wd-button>
              </view>
            </view>
          </view>
          <view class="li flex" v-if="couponUsed(item['staus'])">
            <image class="img" :src="pic1"></image>
            <view class="right">
              <view class="title">{{ item['name'] }}</view>
              <view class="content">预约时间：{{ item['time'] }}</view>
              <view class="bottom">
                <wd-button type="success" size="small" custom-class	="mr-15">已出游</wd-button>
              </view>
            </view>
          </view>
          <view class="li flex opacity" v-if="couponCancel(item['staus'])">
            <image class="img" :src="pic1"></image>
            <view class="right">
              <view class="title">{{ item['name'] }}</view>
              <view class="content">预约时间：{{ item['time'] }}</view>
              <view class="bottom">
                <wd-button type="info" size="small" custom-class	="mr-15">已取消</wd-button>
              </view>
            </view>
          </view>
        </view>
      </wd-tab>
    </wd-tabs>
    
  </view>
</template>

<style lang="scss" scoped>
.coupon-content {
  width: 750rpx;

  & .li {
    width: 690rpx;
    margin: 20rpx 30rpx;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 20rpx;
    padding: 30rpx;
    box-sizing: border-box;
    & .img { 
      width: 220rpx;
      height: 160rpx;
    }
    & .right {
      margin-left: 20rpx;
      width: calc(100% - 220rpx);
      position: relative;
      & .title {
        font-size: 30rpx;
        font-weight: bold;
        color: #000;
        overflow: hidden;         /* 超出隐藏 */
        white-space: nowrap;      /* 不换行 */
        text-overflow: ellipsis;
      }
      & .content {
        margin-top: 15rpx;
        font-size: 28rpx;
        color: #aaa;
      }
      & .bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 390rpx;
        height: 50rpx;
      }
    }
  }
  :deep() {
    .mr-15 {
      margin-right: 15rpx;
    }
    .color-red {
      color: #e60012!important;
    }
  }
  & .opacity {
    opacity: 0.6;
  }
}

</style>
